<template>
  <div>
    <div class="section-lazyonload">
      <div class="background-section" :style="{ height: tabHeight }">
        <div class="background-section__scroll">
          <div class="background-section__header">
            <p class="colors-title">主题颜色</p>
            <div class="leftPanel-background-colors">
              <span
                title="取色器"
                class="leftPanel-background-colors-items add-color"
              ></span>
              <span
                title="#5e01ff"
                class="leftPanel-background-colors-items"
                style="background: rgb(94, 1, 255);"
              ></span>
            </div>

            <p class="colors-title">预设颜色</p>
            <div class="leftPanel-background-colors">
              <span
                title="透明"
                class="leftPanel-background-colors-items transparent"
              ></span>
              <span
                title="#000000"
                class="leftPanel-background-colors-items"
                style="background: rgb(0, 0, 0);"
              ></span
              ><span
                title="#666666"
                class="leftPanel-background-colors-items"
                style="background: rgb(102, 102, 102);"
              ></span
              ><span
                title="#A8A8A8"
                class="leftPanel-background-colors-items"
                style="background: rgb(168, 168, 168);"
              ></span
              ><span
                title="#D9D9D9"
                class="leftPanel-background-colors-items"
                style="background: rgb(217, 217, 217);"
              ></span
              ><span
                title="#FFFFFF"
                class="leftPanel-background-colors-items"
                style="background: rgb(255, 255, 255);"
              ></span
              ><span
                title="#FF5B5C"
                class="leftPanel-background-colors-items"
                style="background: rgb(255, 91, 92);"
              ></span
              ><span
                title="#FFBD4A"
                class="leftPanel-background-colors-items"
                style="background: rgb(255, 189, 74);"
              ></span
              ><span
                title="#FEF951"
                class="leftPanel-background-colors-items"
                style="background: rgb(254, 249, 81);"
              ></span
              ><span
                title="#99E265"
                class="leftPanel-background-colors-items"
                style="background: rgb(153, 226, 101);"
              ></span
              ><span
                title="#35B72A"
                class="leftPanel-background-colors-items"
                style="background: rgb(53, 183, 42);"
              ></span
              ><span
                title="#44D9E6"
                class="leftPanel-background-colors-items"
                style="background: rgb(68, 217, 230);"
              ></span
              ><span
                title="#2EB3FF"
                class="leftPanel-background-colors-items"
                style="background: rgb(46, 179, 255);"
              ></span
              ><span
                title="#5271FF"
                class="leftPanel-background-colors-items"
                style="background: rgb(82, 113, 255);"
              ></span
              ><span
                title="#B760E6"
                class="leftPanel-background-colors-items"
                style="background: rgb(183, 96, 230);"
              ></span
              ><span
                title="#FF63B1"
                class="leftPanel-background-colors-items"
                style="background: rgb(255, 99, 177);"
              ></span>
            </div>
            <div class="leftPanel-background-custom-top">
              <div id="ss-upload">
                <input
                  type="file"
                  id="uploadBackground"
                  accept="image/svg+xml,image/jpeg,image/png,image/gif,image/psd"
                  style="display: none;"
                />
              </div>
              <button class="leftPanel-button" @click="AddBeiJing">
                自定义背景
              </button>
              <p>
                点击色块或素材即可更改背景。若无发生变化，<br />请检查是否被上层图片所遮盖。
              </p>
            </div>
            <hr class="leftPanel__hr" />
          </div>

          <bkgrecommend></bkgrecommend>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

import bkgrecommend from "./components/bkgrecommend";
export default {
  components: { bkgrecommend },
  props: ["tabHeight"],
  name: "words",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["canvas", "selectedObj"])
  },
  created() {
    console.log(this.tabHeight, "tabHeighttabHeight");
  },
  mounted() {},
  methods: {
    ...mapActions(["addBackground"]),
    tabHandleClick() {
      console.log("tabHandleClick");
    },
    AddBeiJing() {
      //http://imgpub.chuangkit.com/materials/2019/09/25/c3ff2f4a-31ed-4662-be5f-3422e50237af
      this.addBackground(
        "http://imgpub.chuangkit.com/materials/2019/09/25/c3ff2f4a-31ed-4662-be5f-3422e50237af"
      );
    }
  }
};
</script>

<style lang="less" scoped>
@import "~@/styles/leftPanel/index.less";
@import "~@/styles/leftPanel/background.less";

/deep/.el-input__inner {
  margin: 24px 24px 16px;
  width: 256px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 40px 0 16px;
  border: 1px solid transparent;
  position: relative;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  outline: none;
  text-align: center;
  background-color: #eaebf3;
}
</style>
